
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Chat Prompt - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>Chat Prompt - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">这个AI编码助手在与用户交互时的主要目标和角色是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">其主要目标是遵循用户的指示，作为用户的“结对编程”伙伴来解决编码任务。AI助手由GPT-4o驱动，在Cursor环境中运行。</div>
          </div>
          <div class="card-source">来源: 文档开头部分关于AI助手角色的定义</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">规则</div>
          <div class="card-question">当AI助手制定了一个计划后，它应该等待用户确认还是立即执行？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">规则</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">AI助手应该立即执行计划，而不等待用户确认。只有在需要用户提供无法通过其他方式获取的信息，或者有不同选项需要用户权衡时才应该停止。</div>
          </div>
          <div class="card-source">来源: <tool_calling></div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">当AI助手为用户的代码提出修改建议时，它应该如何格式化代码块？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">它应该输出一个简化的代码块，使用 `// ... existing code ...` 注释来跳过未更改的代码区域，以此突出显示必要的更改。这种格式是为了帮助一个被称为“apply model”的模型准确地应用修改。</div>
          </div>
          <div class="card-source">来源: <making_code_changes></div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在与用户沟通时，AI助手是否应该提及它正在使用的工具的名称？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">不应该。规则明确指出“NEVER refer to tool names when speaking to the USER”。例如，应该说“我将编辑您的文件”，而不是“我需要使用 the edit_file tool 来编辑您的文件”。</div>
          </div>
          <div class="card-source">来源: <tool_calling></div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">策略</div>
          <div class="card-question">当AI助手不确定如何满足用户请求时，它应该优先采取什么行动？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">策略</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">AI助手应该优先通过调用工具等方式自行收集更多信息，而不是直接向用户寻求帮助。文档指出要“Bias towards not asking the user for help if you can find the answer yourself”。</div>
          </div>
          <div class="card-source">来源: <search_and_reading></div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">`codebase_search` 和 `grep_search` 这两个工具在搜索类型和适用场景上有何不同？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`codebase_search` 是一个语义搜索工具，用于根据语义相关性查找代码片段，适合于不确定具体代码的情况。而 `grep_search` 是基于文本的快速正则表达式搜索，用于查找精确的文本模式，当知道要查找的确切符号或函数名时更受青睐。</div>
          </div>
          <div class="card-source">来源: “tools”部分中关于 `codebase_search` 和 `grep_search` 的描述</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">格式</div>
          <div class="card-question">文档中规定引用代码区域或块时必须使用的唯一可接受格式是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">格式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">唯一可接受的格式是 ```startLine:endLine:filepath```，其中 `startLine` 和 `endLine` 是行号。</div>
          </div>
          <div class="card-source">来源: “You MUST use the following format when citing code regions or blocks”部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">工具</div>
          <div class="card-question">使用 `read_file` 工具时，文档强调了哪些限制和建议？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">工具</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`read_file` 工具一次最多能查看250行。文档建议谨慎使用读取整个文件的选项，因为它可能效率低下且缓慢，尤其对于大文件。只有在文件被用户编辑或手动附加到对话中时，才允许读取整个文件。</div>
          </div>
          <div class="card-source">来源: “tools”部分中关于 `read_file` 的描述</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">在文档的 `<custom_instructions>` 部分，对AI助手的响应语言有什么特殊要求？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">AI助手被要求“Always respond in Spanish”，即总是用西班牙语进行回应。</div>
          </div>
          <div class="card-source">来源: <custom_instructions></div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
